<template>
  <div>
    <el-button type="primary" icon="el-icon-delete">删除选中</el-button>
    <el-select v-model="value" placeholder="地址">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-input
      v-model="valuess"
      placeholder="请输入内容"
      class="inpt"
      @input="search"
    ></el-input>
    <table border="1" cellspacing="0">
      <thead>
        <tr>
          <th><input type="checkbox" /></th>
          <th>ID</th>
          <th>用户名</th>
          <th>账户余额</th>
          <th>头像(查看大图)</th>
          <th>地址</th>
          <th>状态</th>
          <th>注册时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in table" :key="item.id">
          <td><input type="checkbox" /></td>
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.money }}</td>
          <td>
            <img :src="item.thumb" alt="" />
          </td>
          <td>{{ item.address }}</td>
          <td>{{ item.state }}</td>
          <td>{{ item.date }}</td>
          <td>
            <el-button type="text" icon="el-icon-edit" @click="add(item)"
              >编辑</el-button
            >
            <el-button type="text" icon="el-icon-delete">删除</el-button>
          </td>
        </tr>
      </tbody>
    </table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagenum"
      :page-sizes="[1, 2, 3, 4]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <!-- 编辑 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="name">
          <el-input v-model="ruleForm.address"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import table from "../../public/table.json";
export default {
  data() {
    return {
      table: [],
      dialogVisible: false,
      value: "",
      valuess: "",
      pagenum: 1,
      pagesize: 3,
      total: table.list.length,
      options: [
        {
          value: "1",
          label: "广东省",
        },
        {
          value: "2",
          label: "湖南省",
        },
        {
          value: "3",
          label: "福建省",
        },
      ],
      ruleForm: {
        name: "",
        address: "",
      },
      rules: {
        name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
        address: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
      },
    };
  },
  created () {
    this.getdata()
  },
  methods: {
   async getdata(){
      var res=await this.$axios.get("/table.json")
      console.log(res);
      this.table=res.data.list;
      this.userdata();
    },
    /**
     * 搜索
     */
    search(e) {
      this.table = table.list.filter((item) => {
        return item.name.includes(e);
      });
    },
    /**
     * 编辑
     */
    add(item) {
      this.dialogVisible = true;
      console.log(item);
      this.ruleForm = item;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.dialogVisible = false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    /**
     * 删除
     */
    del(item) {
      console.log(item);
    },
    /**
     * 分页
     */
    userdata() {
      let start = (this.pagenum - 1) * this.pagesize; //  开始截取
      let end = this.pagenum * this.pagesize; //  截取最后的位置
      this.table = this.table.slice(start, end); //  当前中间的数据
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pagesize = val;
      this.userdata();
      this.getdata();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pagenum = val;
      this.userdata();
      this.getdata()
    },
  },
};
</script>

<style lang="scss" scoped>
.inpt {
  width: 200px;
}
table {
  width: 100%;
  text-align: center;
  tr {
    td {
      img {
        width: 50px;
        height: 50px;
      }
    }
  }
}
</style>